<template>
  <!-- 放置分配权限弹层 -->
  <el-dialog title="分配权限" :visible="showPermDialog" @close="btnCancel">
    <!-- 权限 -->
    <el-tree
      ref="permTree"
      :data="permData"
      :props="defaultProps"
      :default-expand-all="true"
      :show-checkbox="true"
      :check-strictly="true"
      node-key="id"
      :default-checked-keys="selectCheck"
    />
    <!-- id作为唯一标识 -->
    <!-- check-strictly如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
    <!-- 确定取消 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { assignPerm, getRoleDetail } from '@/api/setting'
import { getPermissionList } from '@/api/permission'
import { tarnListToTreeData } from '@/utils'
export default {
  name: 'AssignPerm',
  props: {
    showPermDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      permData: [], // 接受权限数据
      defaultProps: { // 定义显示字段的名称和子属性的字段名称
        label: 'name'
      }, // 定义显示字段的名称和子属性的字段名称
      roleId: null, // 用来记录当前分配的权限id
      selectCheck: [] // 用来记录当前的权限点的标识
      // showPermDialog: false // 控制分配权限的弹出和隐藏
    }
  },
  methods: {
    // 弹出层
    // 获取权限点数据
    async getPermissionList() {
      const list = await getPermissionList()
      this.permData = tarnListToTreeData(list, '0')
    },
    async assignPerm(id) {
      const { permIds } = await getRoleDetail(id)
      this.selectCheck = permIds
      // console.log('111', this.selectCheck)
      this.roleId = id
    },
    // async assignPerm(id) {
    //   console.log(id)
    //   this.permData = tarnListToTreeData(await getPermissionList(), '0') // 转化list到树形数据
    //   // 有id就可以先存下来
    //   this.roleId = id // 获取id的权限点
    //   const { permIds } = await getRoleDetail(id) // permIds是当前角色所拥有的权限点数据
    //   // console.log(permIds)
    //   this.selectCheck = permIds // 将当前角色所拥有的权限id赋值给
    //   this.showPermDialog = true
    // },
    // 取消
    btnCancel() {
      // console.log(this.$refs.permTree.getCheckedKeys())
      this.selectCheck = [] // 重置数据
      // this.showPermDialog = false
      this.$emit('update:showPermDialog', false)
    },
    // 确认
    async btnOk() {
      // 调用el-tree的方法
      await assignPerm({ permIds: this.$refs.permTree.getCheckedKeys(), id: this.roleId })
      this.btnCancel()
      // const permIds = this.$refs.permTree.getCheckedKeys()
      // const obj = {
      //   id: this.roleId,
      //   permIdss
      // }
      // try {
      //   await assignPerm(obj)
      //   this.btnCancel()
      //   this.$message.success('分配权限数据')
      // } catch (err) {
      //   console.log(err.message)
      // }
    }
  }
}
</script>

<style>

</style>
